<template>
  <v-layout type="console">
    <p class="page-title">成员管理</p>
    <div class="search-box">
      <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="请输入名称"
        @input="getData" />
        <a href="javascript:;" class="add el-icon-plus" @click="showAddMember">成员引进</a>
    </div>
    <el-table :data="tableData" class="table-layout">
      <el-table-column prop="user.username" label="名称"></el-table-column>
      <el-table-column prop="user.nick_name" label="昵称"></el-table-column>
      <el-table-column prop="roles" label="角色">
        <template slot-scope="scope">
          <p v-if="scope.row.roles == 0">超级管理员</p>
          <p v-else-if="scope.row.roles == 1">项目组组长</p>
          <p v-else>普通成员</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>
    <el-dialog title=" " :visible.sync="showSet">
      <div class="add-user-box">
        <el-select v-model="addForm.user_id" placeholder="选择用户" class="user-lis">
          <el-option v-for="(e, i) in allUser" :key="i" :label="e.nick_name" :value="e.id" />
        </el-select>
        <el-select v-model="addForm.roles" placeholder="设置角色" class="role-lis">
          <el-option label="管理员" value="1" />
          <el-option label="普通用户" value="2" />
        </el-select>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addMember">添 加</el-button>
        <el-button @click="showSet = false">关 闭</el-button>
      </span>
    </el-dialog>
  </v-layout>

</template>

<script>
import {  organizationUserAll,addOrganizationUser, delOrganizationUser } from '@/api/org'
import { userAll } from '@/api/user'
export default {
  data() {
    return {
      showThisActive: 1,
      tableData: [],
      addForm:{},
      allUser:[],
      showSet: false,
      Pagedata: {
        pageNum: 1,
        pageSize: 1000,
        total: 0,
      },
    };
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      let res = await organizationUserAll({ ...this.Pagedata })
      this.tableData = res.data
      this.Pagedata.total = res.total

      let userLisIds = this.tableData.map(e => e.user.id)
      let res2 = await userAll()
      //console.log(userLisIds)
      //console.log(res.data)
      this.allUser = res2.data.filter(e => userLisIds.indexOf(e.id) == -1)
      //this.allUser = res2.data
    },
    showAddMember() {
      this.showSet = true
    },
    async del(row) {
      let res = await delOrganizationUser( row)
      if (res) {
        this.getData()
      }

    },
    async addMember() {
      let myInfo = await this.$myInfo(this)
      let data ={
        'organization_id': myInfo.organization_id,
        'roles': this.addForm.roles,
        'user_id': this.addForm.user_id
      }
      let res = await addOrganizationUser(data)
      if (res) {
        this.showSet= false
        this.getData()
      }

    },
    handleCurrentChange(val) {
      this.Pagedata.current = val
      this.getData()
    },
  }
}
</script>
<style lang="less" scoped>
.table-layout{
  margin-top: 50px;
}
</style>